{{Template:SZPT-CHINA/head}}
<html>

<head>

</head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">
<script>
    $(document).ready(function () {
        //document.body.append(document.getElementById('loadImg'))
        //滑动
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg');//选取id为test的元素
        loadImg.style.display = 'block';	// 隐藏选择的元素
    });


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();


        setTimeout(function () {
            //$("#loaderDownId").hide();
            //滑到顶部
            //document.body.scrollTop = document.documentElement.scrollTop = 0;

            $("#directory").hide();
            $("#loadingHome").hide();

            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 10);




        //


    }

    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        // document.getElementById("dir1").onclick = function () {
        //     // window.scrollTo(0, 350*heightRatio/0.713265306122449);
        //     let target = document.getElementById('content1');
        //     animateScroll(target, 250);
        //     $("#directory").show();
        // }
        // document.getElementById("dir2").onclick = function () {
        //     //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
        //     let target = document.getElementById('content2');
        //     animateScroll(target, 250);
        // }
        // document.getElementById("dir3").onclick = function () {
        //     //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
        //     let target = document.getElementById('content3');
        //     animateScroll(target, 250);
        // }
        // document.getElementById("dir4").onclick = function () {
        //     //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
        //     let target = document.getElementById('content4');
        //     animateScroll(target, 250);
        // }
        // document.getElementById("dir5").onclick = function () {
        //     //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
        //     let target = document.getElementById('content5');
        //     animateScroll(target, 250);
        // }



    });
    $(window).scroll(function () {

        if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
            $("#directory").show();
        } else {
            $("#directory").hide();
        }

    });
// 视频加载好
// function hideLoad() {
//     console.log("视频加载好了", loadhidekey)

//     if (loadhidekey == 1) {
//         setTimeout(function () {
//             //$("#loaderDownId").hide();
//             $("#loadingHome").hide();
//             //$("#loading").hide();
//         }, 10);
//     }
//     else if (loadhidekey == 0) {
//         loadhidekey = 1;
//     }
// }
//END-loading
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", pNo);
        $("#bg1").attr("style", bgNo);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);

        $("#p4").attr("style", p);
        $("#bg4").attr("style", bg);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Model";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Experiments";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Results";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Future_Work";
        });
    });
</script>
<script>

    $(document).ready(function () {

    });
</script>

<body class="pc" id="main">

    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height:115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 6%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>
    <div>
        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/6/60/T--SZPT-CHINA--EXPERIMENTS-model.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2"
                        src="https://2021.igem.org/wiki/images/a/ab/T--SZPT-CHINA--EXPERIMENTS-Experiments.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/a/a9/T--SZPT-CHINA--EXPERIMENTS-results.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/5/5c/T--SZPT-CHINA--EXPERIMENTS-work.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/0/0b/T--SZPT-CHINA--EXPERIMENTS-future_work_font.png"
                    style="margin-top: -50px;margin-left: 550px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>
        </div>
        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 4600px; width: 55px;background-color: #2588d4;">
            </div>
            <!-- <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
            <div
                style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                <h3 id="dir0p"
                    style="color:#fffea4;padding-left: 10%;font-size:1.8rem;font-family: 'Quicksand', sans-serif;">
                    Future Work</h3>
                <div style="margin-left: 13%;">
                    <div id="dir1"
                        style="color:#ffffff; transition: all 0.3s;width: auto;height: 6vh;border-top-right-radius:6px;border-top-left-radius :10px;">
                        <p id="dir1p" style="font-size: 1.2rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                            Team Establishment
                        </p>
                    </div>

                    <div id="dir2" style="color:#ffffff;height:6vh;width: auto;">
                        <p id="dir2p"
                            style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                            Team members
                        </p>
                    </div>

                    <div id="dir3" style="color:#ffffff;width: auto;height: 6vh;">
                        <p id="dir3p"
                            style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                            PIs</p>
                    </div>

                    <div id="dir4" style="color:#ffffff;width: auto;height:6vh;">
                        <p id="dir4p"
                            style="transition: all 0.3s;font-size:1.2rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                            Instructors
                        </p>
                    </div>

                    <div id="dir5" style="color:#ffffff;width: auto;height: 6vh;">
                        <p id="dir5p" style="font-size: 1.2rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                            Advisors
                        </p>
                    </div>


                    <div id="dir6"
                        style="color:#ffffff;width: auto;height: 8vh;border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
                        <p id="dir6p" style="font-size: 1.2rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                            Acknowledgments</p>
                    </div>
                </div>
            </div>
        </div> -->
            <div class="content"
                style="float:left;width: 1173px;margin-left: 276px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">



                <div class="pb">Our goal is to treat the second-degree and third-degree burn wounds. It is expected to reduce
                    antibiotic use and form a barrier that can prevent wound infection by <i>P. aeruginosa</i>.
                    Throughout
                    the
                    project, we realized that much work remained to be done and that experimental data are further
                    needed to
                    support the entire project. In the future, we will still continue to improve the design and
                    construction
                    to achieve our goals.
                    However, we believe that our work is a considerable contribution to the iGEM community. In general,
                    our
                    future work will be focused in four aspects, including 1.the antipseudomonal drug synthesis module,
                    2.the
                    c-di-GMP signaling and BC film production module, 3. integration, 4. product.
                </div>

                <div id="content1" class="yj">● Antipseudomonal drug synthesis module
                </div>

                <div class="pb">
                    At present, we have successfully introduced the drug production module containing SE- and
                    IMM-encoded
                    genes into <i>Gluconacetobacter hansenii</i> ATCC 53582. At the same time, the
                    <i>Pseudomonas</i>-specificity and
                    antibacterial effect of SE protein expressed with different RBS were verified.
                    In addition, to have a persistent resistance of SE to <i>Pseudomonas aeruginosa</i>, we are
                    engineering
                    an
                    anchor protein, which can enhance the attachment of the anti-pseudomonal drug SE to the BC film
                    produced
                    by <i>G. hansenii</i> ATCC 53582.

                </div>


                <div id="content2" class="yj">● C-di-GMP signaling and BC film production module
                </div>

                <div class="pb" style="margin-top: 150px;">
                    In the c-di-GMP signaling and BC film production module, our previous expectation is that the film
                    would
                    be produced under near-infrared light, but not under the dark conditions. In our experiments, we
                    firstly
                    verified that the BphS protein can increase the film production by <i>Gluconacetobacter hansenii
                    </i>ATCC 53582
                    under near-infrared light conditions. Then the bphS was engineered to integrate together with yhjH
                    and
                    fcsR parts that can hydrolyze c-di-GMP, and a few engineered bacteria were screened for better film
                    growth under NIR light exposure than under dark conditions, but we have not yet managed to make
                    engineered bacteria not grow BC films under dark conditions.

                    <br>

                    <br>

                    To solve this problem, we will make the following two adjustments in the future:
                    <br>
                    1. Re-screen the parts that can hydrolyze c-di-GMP.
                    <br>
                    2. Modulate the BphS expression level or the strength of yhjH and fcsR to achieve the purpose that
                    BC
                    film can be produced under near-infrared light irradiation, but not under dark conditions.


                </div>




                <div id="content3" class="yj">● Integration
                </div>

                <div class="pb">
                    The goal of the whole project is to engineer a bacterium that can produce BC film under
                    near-infrared
                    light, but not under dark conditions. While treated by the blue light, the engineered bacterium
                    would be
                    lysed with the release of the antibacterial drugs. Then the antibacterial drugs SE are bound to BC
                    film.
                    In this year, we have individually verified the function of three modules, but have not yet
                    integrated
                    all of three modules into <i>Gluconacetobacter hansenii</i> ATCC 53582. So, it remains to verify
                    whether these
                    modules can operate normally if they are combined together. These will be our major work in the
                    future.

                </div>


                <div id="content4" class="yj">● Product
                </div>

                <div class="pb">
                    In our product form, the set expectation is to make live bacteria lyophilizer and an oil-in-water
                    system
                    emulsion. We have made great success in the emulsion part, while the survival rate of live bacteria
                    in
                    the lyophilizer is about 20%, which has not reached our expectation. To improve bacterial survival
                    rate
                    in our products, we will continue to search the literature, and identify better agents and
                    conditions to
                    lyophilize <i>G. hansenii</i> ATCC 53582 in the future.


                </div>



            </div>
            <div id="red" style="float: left;margin-left: 261px; height: 4600px;width: 55px;background-color: #d44225;">
            </div>
        </div>
        <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
            style="margin-top: -372px;width: 1920px;"></image>
    </div>
</body>


<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        console.log(heightRatio)
        document.getElementById('content').style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight

            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');

            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/4600/, "6600")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/4600/, "6600")
            $("#red").attr("style", value);
            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>